<template>
  <div class="h-100 w-full flex flex-col">
    <div ref="chinaMapGlRef" class="flex-1 h-0"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import "echarts-gl";
import china from "../echarts-3d-china.json";
import { useEchartsResizeAndDestory } from "../hooks/EchartsResizeAndDestoryHooks";

const chinaMapGlRef = ref(null);
const chinaGlInstance = shallowRef();

const option = {
  tooltip: {
    show: true,
  },

  //3D地图配置项
  geo3D: {
    map: "china",
    roam: true,
    itemStyle: {
      color: "#007aff",
      opacity: 0.8,
      borderWidth: 0.4,
      borderColor: "#000",
      // areaColor: '#fff'
    },
    viewControl: {
      autoRotate: true, //自动旋转
      autoRotateAfterStill: 3, //停止旋转，单位秒，设置时间内未进行交互操作，将开始自动旋转
      distance: 120, //观察者距离地图表面距离
      minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
      maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
      minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
      maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
      animation: true, // 是否开启动画。[ default: true ]
      animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
      animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
    },

    emphasis: {
      disabled: true, //是否可以被选中
      label: {
        //移入时的高亮文本
        show: true,
        color: "#333", //显示字体颜色变淡
        fontSize: 18, //显示字体变大
      },
      itemStyle: {
        color: "#ff7aff", //显示移入的区块变粉色
      },
    },
    label: {
      show: true,
      position: "top",
      color: "#111", //地图初始化区域字体颜色
      fontSize: 14,
      lineHeight: 16,
    },
    shading: "lambert",
    light: {
      //光照阴影
      main: {
        // color: "#fff", //光照颜色
        intensity: 1, //光照强度
        //shadowQuality: 'high', //阴影亮度
        shadow: true, //是否显示阴影
        shadowQuality: "medium", //阴影质量 ultra //阴影亮度
        alpha: 55,
        beta: 10,
      },
      ambient: {
        intensity: 0.7,
      },
    },
  },
  series: [],
};
useEchartsResizeAndDestory(chinaGlInstance, chinaMapGlRef);
onMounted(() => {
  init();
});

const init = () => {
  const echartsContainer = chinaMapGlRef.value;
  if (!echartsContainer) return;
  echarts.registerMap("china", china);
  chinaGlInstance.value = echarts.init(echartsContainer);
  chinaGlInstance.value.setOption(option);
};
</script>

<style lang="scss" scoped></style>
